<template>
    <div class="addContainer">
        <div class="addcontainer">
            <!-- 头部 -->
            <div class="headerContainer">
                <span style="margin-left: 20px;font-size: 16px;">商品添加编辑</span>
                <el-button type="info" :icon="ArrowLeft" style="float: right;margin: 10px 20px 0 0;" @click="backShopMain">返回</el-button>
            </div>

            <!-- 表单 -->
            <div class="formContainer">
                <el-form
                :label-position="labelPosition"
                label-width="100px"
                :model="goodsAdd"
                style="max-width: 1000px;margin: 0 0 10px 200px;padding: 20px 0;"
                >
                <el-form-item label="商品分类">
                    <el-select v-model="goodsAdd.goodsClassification" clearable placeholder="请选择商品分类" style="width: 30%;">
                        <el-option
                        v-for="item in goodsClassificationOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="商品类型">
                    <el-radio-group v-model="goodsAdd.goodsType">
                        <el-radio label="虚拟物品">虚拟物品</el-radio>
                        <el-radio label="实物商品">实物商品</el-radio>
                        <el-radio label="积分兑换商品">积分兑换商品</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model="goodsAdd.goodName" placeholder="请输入商品名称" style="width: 30%;"/>
                </el-form-item>
                <el-form-item label="商品售价">
                    <el-input type="number" v-model="goodsAdd.goodPrice" placeholder="请输入商品售价,单位￥" style="width: 20%;"/>
                </el-form-item>
                <el-form-item label="商品介绍">
                    <el-input type="textarea" :rows="10" v-model="goodsAdd.goodIntroduce" placeholder="请输入商品介绍" style="width: 50%;"/>
                </el-form-item>
                <el-form-item label="商品标签">
                    <el-tag
                        v-for="tag in dynamicTags"
                        :key="tag"
                        class="mx-1"
                        style="margin-right: 8px;"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)"
                    >
                        {{ tag }}
                    </el-tag>
                    <el-input
                        v-if="inputVisible"
                        ref="InputRef"
                        v-model="inputValue"
                        class="ml-1 w-20"
                        size="small"
                        style="width: 25%;"
                        @keyup.enter="handleInputConfirm"
                        @blur="handleInputConfirm"
                    />
                    <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                        + 新标签
                    </el-button>
                </el-form-item>
                <el-form-item label="商品头图">
                    <el-upload
                        v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit(goodsAdd)">提交</el-button>
                </el-form-item>
            </el-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, nextTick, getCurrentInstance, onBeforeMount } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile, ElInput } from 'element-plus'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
    name: 'AddGoods',
    setup() {
        const router=useRouter()
        const route=useRoute()

        const instance = getCurrentInstance()

        const labelPosition = ref('right')

        const goodsAdd = reactive({
            goodName: '',
            goodsType: '虚拟物品',
            goodsClassification: '',
            type: '',
            goodPrice: '',
            goodIntroduce: ''
        })

        onBeforeMount(() => {
            let obj1: any = route.query.info
            let obj2 = JSON.parse(obj1)
            goodsAdd.goodName = obj2.name || ''
            goodsAdd.goodsType = obj2.type || '虚拟物品'
            goodsAdd.goodPrice = obj2.price || ''
        })

        const goodsClassificationOptions = [
            {
                value: '无',
                label: '无',
            }
        ]

        const inputValue = ref('')
        const dynamicTags = ref(['游戏'])
        const inputVisible = ref(false)
        const InputRef = ref<InstanceType<typeof ElInput>>()

        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
        }

        const showInput = () => {
            inputVisible.value = true
            nextTick(() => {          
                InputRef.value!.input!.focus()
            })
        }

        const handleInputConfirm = () => {
            if (inputValue.value) {
                dynamicTags.value.push(inputValue.value)
            }
            inputVisible.value = false
            inputValue.value = ''
        }

        const fileList = ref<UploadUserFile[]>([
            {
                name: 'food.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
            }
        ])

        const dialogImageUrl = ref('')
        const dialogVisible = ref(false)

        const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
            console.log(uploadFile, uploadFiles)
        }

        const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
            dialogImageUrl.value = uploadFile.url!
            dialogVisible.value = true
        }

        const backShopMain = () => {
            router.go(-1)
        }

        const submit = (e: any) => {
        }

        return {
            ArrowLeft,
            labelPosition,
            goodsAdd,
            goodsClassificationOptions,
            dynamicTags,
            handleClose,
            inputVisible,
            inputValue,
            handleInputConfirm,
            showInput,
            fileList,
            handleRemove,
            handlePictureCardPreview,
            dialogVisible,
            dialogImageUrl,
            backShopMain,
            submit
        }
    }
})
</script>

<style>

    .addContainer {
        width: 98%;
        height: 100%;
        padding: 30px 0;
        margin: 10px auto;
        border-radius: 15px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
            rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
            rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }

    .addcontainer {
        width: 96%;
        height: 100%;
        margin: 10px auto;
        border-radius: 15px;
    }

    .headerContainer {
        width: 98%;
        height: 50px;
        line-height: 50px;
        padding: 5px 0;
        margin: 0 auto;
        background-color: #eee;
        border-radius: 15px 15px 0 0; 
    }

    .formContainer {
        width: 98%;
        margin: 0 auto;
        outline: 1px solid #eee;
    }
</style>